<template>
    <div>
        <div class="main_wrap">
            <div class="mv_info">
                <h3>MV详情</h3>
                <div class="video">
                    <video :src="mvUrl" controls="controls"></video>
                </div>
                <div class="artist">
                    <img :src="imgUrl" alt="">
                    <span>{{mvInfo.artistName}}</span>
                </div>
                <div class="mv_name">
                    <span>{{mvInfo.name}}</span>
                </div>
                <div class="mv_time">
                    <span>发布：{{mvInfo.publishTime}}</span>
                    <span>播放：{{mvInfo.playCount}}次</span>
                </div>
                <div class="description">
                    <span>{{mvInfo.desc}}</span>
                </div>

            </div>
            <div class="mv_about">
                <h3>相关推荐</h3>
                <div class="item" v-for="(item,index) in mvs" :key="index">
                    <div class="img_wrap">
                        <img :src="item.cover" alt="" @click="toMv(item.id)">
                        <span class="play_count"><i class="el-icon-caret-right"></i>{{item.playCount}}</span>
                    </div>
                    <div class="info_wrap">
                        <p>{{item.name}}</p>
                        <p class="song_artist">{{item.artistName}}</p>
                    </div>
                </div>
            </div>

        </div>
        <div class="comments">
            <div class="comment_wrap" v-if="hotCommentCount!=0">
                <h3>热门评论({{hotCommentCount}})</h3>
                <div class="item" v-for="(item,index) in hotcomment" :key="index">
                    <div class="icon_wrap">
                        <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <div class="info_wrap">
                        <div class="user_id">
                            <span class="text_blue">{{item.user.nickname}}：</span>
                            {{item.content}}
                        </div>
                        <div class="re_content" v-if="item.beReplied.length!=0">
                            <span class="text_blue">{{item.beReplied[0].user.nickname}}：</span>
                            {{item.beReplied[0].content}}
                        </div>
                        <div class="user_time">
                            <span>{{item.time}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment_wrap">
                <h3>最新评论({{commentCount}})</h3>
                <div class="item" v-for="(item,index) in comment" :key="index">
                    <div class="icon_wrap">
                        <img :src="item.user.avatarUrl" alt="">
                    </div>
                    <div class="info_wrap">
                        <div class="user_id">
                            <span class="text_blue">{{item.user.nickname}}：</span>
                            {{item.content}}
                        </div>
                        <div class="re_content" v-if="item.beReplied.length!=0">
                            <span class="text_blue">{{item.beReplied[0].user.nickname}}：</span>
                            {{item.beReplied[0].content}}
                        </div>
                        <div class="user_time">
                            <span>{{item.time}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_card">
                <el-pagination
                        @current-change="currentPage"
                        layout="prev, pager, next"
                        :current-page="page"
                        :page-size="20"
                        :total="commentCount">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "MV",
        data(){
            return{
                mvUrl:'',
                mvInfo:[],
                imgUrl:'',
                mvs:[],
                hotcomment:[],
                hotCommentCount:0,
                comment:[],
                commentCount:0,
                page:1,
            }
        },
        methods:{
            playMv(){
                axios({
                    url:'https://autumnfish.cn/mv/url',
                    method:'get',
                    params:{
                        id:this.$route.query.id,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.mvUrl=response.data.data.url;
                })
            },
            getMvAbout(){
                axios({
                    url:'https://autumnfish.cn/simi/mv',
                    method:'get',
                    params:{
                        mvid:this.$route.query.id,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.mvs=response.data.mvs;
                })
            },
            getMvInfo(){
                axios({
                    url:'https://autumnfish.cn/mv/detail',
                    method:'get',
                    params:{
                        mvid:this.$route.query.id,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.mvInfo=response.data.data;

                    axios({
                        url:'https://autumnfish.cn/artists',
                        method:'get',
                        params:{
                            id:this.mvInfo.artistId,
                        }
                    }).then(res=>{
                       // console.log(res);
                        this.imgUrl=res.data.artist.picUrl;

                    })
                })
            },
            getMvComment(){
                axios({
                    url:'https://autumnfish.cn/comment/mv',
                    method:'get',
                    params:{
                        id:this.$route.query.id,
                        limit:20,
                        offset:(this.page-1)*20,
                    }
                }).then(response=>{
                    //console.log(response);
                    this.comment=response.data.comments;
                    this.commentCount=response.data.total;
                    this.hotcomment=response.data.hotComments;
                    if(response.data.hotComments)
                    this.hotCommentCount=response.data.hotComments.length;
                    else
                        this.hotCommentCount=0;
                })
            },
            currentPage(tPage){
                this.page=tPage;
                this.getMvComment();
            },
            toMv(id){
                //传参数到MV
                this.$router.push(`/MV?id=${id}`);
            },
        },
        created() {
            this.playMv();
            this.getMvInfo();
            this.getMvAbout();
            this.getMvComment();
        },
        watch:{
            $route(){
                this.page=1;
                this.playMv();
                this.getMvInfo();
                this.getMvAbout();
                this.getMvComment();
            }
        },
    }
</script>

<style scoped>
    img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .main_wrap{
        position: relative;
        display: flex;
        width: 90%;
        left: 5%;
        top:5px;
    }
    .main_wrap .mv_info{
       flex:6.5;
    }
    .main_wrap .mv_info .video{
        width: 93%;
        height: 400px;
        margin:10px 0;
    }
    .main_wrap .mv_info .video>video{
        width: 100%;
        height: 100%;
        outline: none;
    }
    .main_wrap .mv_info .artist{
        width: 100%;
        margin:10px 0;
        display: flex;
        align-items: center;
        font-size: 18px;
    }
    .main_wrap .mv_info .artist>img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .main_wrap .mv_info .mv_name{
        width: 100%;
        font-size: 25px;
        font-weight: bold;
        margin:10px 0;
    }

    .main_wrap .mv_info .mv_time{
        width: 100%;
        font-size: 14px;
        color: grey;
        margin:10px 0;
    }
    .main_wrap .mv_info .description{
        margin:10px 0;
    }
    .main_wrap .mv_info .mv_time>span{
        margin-right: 30px;
    }
    .main_wrap .mv_about{
        position: relative;
        flex:3.5;
    }
    .main_wrap .mv_about .item{
        width: 100%;
        display: flex;
        margin-top: 10px;
        align-items: center;
    }
    .main_wrap .mv_about .img_wrap{
        width: 200px;
        height: 110px;
        position: relative;
        cursor: pointer;
    }
    .main_wrap .mv_about .info_wrap{
        flex: 1;
        margin-left: 6px;
    }
    .main_wrap .mv_about .song_artist{
        margin-top: 10px;
        color: grey;
        font-size: 15px;
    }
    .main_wrap .mv_about .play_count{
        background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(58,58,10,1));
        position: absolute;
        right: 0;
        color: white;
    }

    .comments{
        position: relative;
        width: 90%;
        left: 5%;
        margin-top: 20px;
    }
    .comments .comment_wrap{
        width: 100%;
    }
    .comments .comment_wrap .item{
        width: 100%;
        padding: 5px;
        margin: 15px;
        display: flex;
        border-bottom: 1px solid grey;
    }
    .comments .comment_wrap .icon_wrap{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: white;
    }
    .comments .comment_wrap .icon_wrap>img{
        border-radius: 50%;
    }
    .comments .comment_wrap .info_wrap{
        flex:1;
        margin-left: 10px;
    }
    .comments .comment_wrap .info_wrap .user_id{
        position: relative;
    }
    .text_blue{
        color: #517EAF;
    }
    .comments .comment_wrap .info_wrap .re_content{
        position: relative;
        background:#E6E5E6;
        border-radius: 5px;
        line-height: 30px;
    }
    .comments .comment_wrap .info_wrap .user_time{
        position: relative;
        top:5px;
        color: grey;
        font-size: 14px;
        height: 30px;
    }
    .page_card{
        width: 90%;
        position: relative;
        left: 5%;
        text-align: center;
    }

</style>